<template>
	<view class="container">
		<view class="scroll">
			<view class="scroll-con">
				<scroll-view scroll-x scroll-with-animation :throttle="false" :scroll-left="scrollToLeft">
					<view class="scroll-area">
						<block v-for="(item, index) in tabs" :key="index">
							<view :class="['scroll-item', { 'scroll-activer': index == tabIndex }]"
								@tap="handleBusChange1(index)">
								{{item}}
								<view class="scroll-border" v-if="index == tabIndex"></view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
			<view class="tab_two_main" v-if="tabIndex==0">
				scsscbfbfbbhnn
			</view>
			<view class="tab_two_main" v-if="tabIndex==1">
				scsscbfbfb
			</view>
			<view class="tab_two_main" v-if="tabIndex==2">
				scsscbfbb
			</view>
			<view class="tab_two_main" v-if="tabIndex==3">
				scsscrbb
			</view>
			<view class="tab_two_main" v-if="tabIndex==4">
				scsscfbfb
			</view>
			<view class="tab_two_main" v-if="tabIndex==5">
				scssds
			</view>
			
	</view>
</template>	

<script>
	// import mixins from '@/mixins/index.js';'

	export default {
		// mixins: [mixins],
		components: {

		},
		data: () => ({
			tabs: ['全部', '福利特惠', '加油常买', '月油耗400', '月油耗600'],
			scrollAreaLeft: 0,
			scrollAreaWidth: 0,
			tabItemList: [],
			scrollToLeft: 0,
			tabIndex: 0,
		}),
		computed: {},

		// 页面周期函数--监听页面加载
		onLoad(options) {
			this.initScrollData1()
		},

		onPullDownRefresh() {},
		onReachBottom() {},
		methods: {
			handleBusChange1(index) {
				this.tabIndex = index;
				this.scrollDom1(index);
			},
			initScrollData1() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.scroll-area').fields({
					rect: true,
					size: true
				}, res => {
					this.scrollAreaLeft = res.left;
					this.scrollAreaWidth = res.width;
				});
				query.selectAll('.scroll-item').fields({
					rect: true,
					size: true
				}, data => {
					data.forEach((item, index) => {
						this.tabItemList.push({
							width: item.width,
							left: item.left
						});
					});
				});
				query.exec();
			},
			scrollDom1(index) {
				const offsetLeft = this.tabItemList[index].left - this.scrollAreaLeft
				const scrollLeft = offsetLeft - (this.scrollAreaWidth - this.tabItemList[index].width) / 2;
				this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
			}
		}
	};
</script>

<style lang="scss">
	.container {
		background-color:#fff;
		border-radius:10rpx;
		.scroll {
			margin-top: 16rpx;

			.scroll-con {
				overflow-x: auto;
				white-space: nowrap;
				background: #fff;

				.scroll-item {
					position: relative;
					display: inline-block;
					text-align: center;
					padding: 28rpx 0;
					margin-right: 36rpx;
					font-size: 32rpx;
					font-weight: bold;

					&:first-child {
						margin-left: 24rpx;
					}

					&:last-child {
						margin-right: 24rpx;
					}

					.scroll-border {
						position: absolute;
						bottom: 0rpx;
						left: 0;
						right: 0;
						margin: auto;
						width: 66rpx;
						height: 6rpx;
						background: #ff5548;
						border-radius: 2rpx;
					}
				}

				.scroll-activer {
					color: #ff5548;
				}
			}
		}
	}
</style>
